/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #f2f2f2;
  --vt-c-white-soft: #e3e3e3;
  --vt-c-white-mute: rgb(228, 228, 228);

  --vt-c-black: #1f1f1f;
  --vt-c-black-soft: #303030;
  --vt-c-black-mute: #3f3f3f;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(90, 90, 90, 0.65);
  --vt-c-divider-dark-2: rgba(90, 90, 90, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root, :root.light {
  --section-gap: 160px;

  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);
  --color-background-darker: var(--vt-c-white-mute);
  --color-background-lighter: var(--vt-c-white);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --color-shadow: rgba(0, 0, 0, 0.12);
}

:root.dark {
  --color-background: var(--vt-c-black);
  --color-background-soft: var(--vt-c-black-soft);
  --color-background-mute: var(--vt-c-black-mute);
  --color-background-darker: var(--vt-c-black);
  --color-background-lighter: var(--vt-c-black-mute);

  --color-border: var(--vt-c-divider-dark-2);
  --color-border-hover: var(--vt-c-divider-dark-1);

  --color-heading: var(--vt-c-text-dark-1);
  --color-text: var(--vt-c-text-dark-2);

  --color-shadow: rgba(0, 0, 0, 0.3);
}

/* my colors */
:root {
  --color-red-transparent: rgba(200, 50, 80, 0.084);
  --color-red: rgb(200, 50, 80);
  --color-danger: rgb(200, 50, 80);
  --color-danger-hover: rgba(200, 50, 80, 0.2);
}

:root, :root.light{
  --color-pure: #fff;
  --color-theme: rgb(82, 153, 182);
  --color-text-soft: rgba(80, 80, 80, 0.5);
  --color-background-ssoft: #e8e8e8;
  --color-background-theme-highlight: rgba(137, 189, 213, 0.2);
  --color-background-theme-thin: #dbdee5;
  --color-background-theme: rgba(127, 178, 220, 0.3);
  --color-background-tagpanel: #efefef;
  --color-progressbar: #007bff;
  --color-background-progressbar: #f4f4f4;
}

:root.dark{
  --color-pure: #000;
  --color-theme: rgb(80, 180, 200);
  --color-text-soft: rgba(180, 180, 180, 0.5);
  --color-background-ssoft: #2c2c2c;
  --color-background-theme-highlight: rgba(108, 186, 185, 0.2);
  --color-background-theme-thin: #383b41;
  --color-background-theme: rgba(52, 84, 93, 0.3);
  --color-background-tagpanel: #232323;
  --color-progressbar: #0e58a8;
  --color-background-progressbar: #202020;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
} */


*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  position: relative;
  font-weight: normal;
}

body {
  /* min-height: 100vh; */
  color: var(--color-text);
  background: var(--color-background);
  transition: color 0.5s, background-color 0.5s;
  line-height: 1.6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
